﻿
@{
    Layout = "_Layout";
}

<div class="row">
    <div class="col-lg-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>权限设置</h5>
                <div class="ibox-tools">
                </div>
            </div>
            <div class="ibox-content">
                <div class="col-lg-6" style="padding:0">
                    <div class="form-group">
                        <label>角色名：</label><input class="form-control" v-model="name" />
                    </div>
                    <div>
                        <button v-if="id==0" class="btn btn-sm btn-primary pull-left m-t-n-xs ladda-button" data-style="zoom-in" type="submit" id="addmoney" v-on:click="add"><strong>确定</strong></button>
                        <button v-else class="btn btn-sm btn-warning pull-left m-t-n-xs ladda-button" data-style="zoom-in" type="submit" id="addmoney" v-on:click="mdy"><strong>修改</strong></button>
                    </div>
                </div>
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>权限名称</th>
                            <th>路径</th>
                            <th>权限列表</th>
                        </tr>
                    </thead>
                    <tbody style="border:0" v-for="item in power">
                        <tr>
                            <td colspan="5"><b class="text-warning">{{item.groupName}}</b></td>
                        </tr>
                        <tr v-for="view in item.jurisdictViews">
                            <td>
                                <div class="checkbox checkbox-info checkbox-inline m-l-sm">
                                    <input type="checkbox" :id="view.viewName" :value="view.viewName" v-model="select">
                                    <label :for="view.viewName"> {{view.viewName}}</label>
                                </div>
                            </td>
                            <td>{{view.path}}</td>
                            <td>
                                <div class="checkbox checkbox-info checkbox-inline m-l-sm" v-for="action in view.actionApis">
                                    <input v-if="select.indexOf(view.viewName)==-1&&action.name!=view.viewName" type="checkbox" disabled="disabled">
                                    <input v-else type="checkbox" :id="action.name" :value="action.name" v-model="select">
                                    <label :for="action.name"> {{action.name}}</label>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script>
    var vue = new Vue({
        el: "#bind",
        data: {
            power: [],
            select: [],
            name: "",
            id:@ViewData["id"]
        },
        created: function () {
            var _this = this;
            get("/api/publicApi/GetJurisdicts", {}, function (res) {
                _this.power = res;
            })
            if (_this.id > 0) {
                get("/addrule/GetRule", { id: _this.id }, function (res) {
                    _this.name = res.name;
                    _this.select = res.paths;
                })
            }
        },
        methods: {
            add: function () {
                var _this = this;
                post("/AddRule/add", { name: _this.name, actionNames: _this.select }, function (res) {
                    if (res) {
                        alertDo("添加成功", function () {
                            location.href = "/rule";
                        }, "success");
                    } else {
                        alert("添加失败", "error");
                    }
                })
            },
            mdy: function () { 
                var _this = this;
                post("/AddRule/mdy", { id: _this.id, name: _this.name, actionNames: _this.select }, function (res) {
                    if (res) {
                        alertDo("修改成功", function () {
                            location.href = "/rule";
                        }, "success");
                    } else {
                        alert("修改失败", "error");
                    }
                })
            }
        },
        watch: {
            select: function () {
                console.log(this.select)
            }
        }
    })
</script>